<template>
	<view class="cover">
		<template v-if="empty">
			<view class="cover-title">
				{{title}}
			</view>
		</template>
		<image
			style="width: 100%;height: 100%;"
			:src="cover"
		></image>
	</view>
</template>

<script>
	export default {
		name: "book-cover",
		props: {
			cover: {
				type: String,
			},
			empty: {
				type: Boolean,
				value: false
			},
			title: {
				type: String,
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.cover {
		width: 184rpx;
		height: 256rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		flex-shrink: 0;
		position: relative;

		&-title {
			width: 100%;
			height: 30%;
			padding: 0 10%;
			box-sizing: border-box;
			display: flex;
			align-items: flex-end;
			justify-content: center;

			position: absolute;
			top: 0;
			left: 0;
			font-size: 16rpx;
		}
	}
</style>